<template>
  <div class="nav">

    <el-row>

      <el-col :span="4">

        <div>
          <img src="../assets/logo.png" alt="" style="width: 50px;">
        </div>
      </el-col>
      <el-col :span="16">
        <el-menu  class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><router-link to="/home">首页</router-link></el-menu-item>
          <el-menu-item index="2"><router-link to="/school">校园分享</router-link></el-menu-item>
          <el-menu-item index="3"><router-link to="/about">关于我们</router-link></el-menu-item>
          <el-menu-item index="4"><router-link to="/release">发布帖子</router-link></el-menu-item>

        </el-menu>
      </el-col>
      <el-col :span="4">
        <div class="user" v-if="$store.state.isLogin">
          <el-dropdown>
            <div>
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item ><router-link to="/PersonalCenter" >个人中心</router-link></el-dropdown-item>
              <el-dropdown-item>消息</el-dropdown-item>
              <el-dropdown-item ><span  @click="loginout()">退出</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else-if="!$store.state.isLogin">
        <el-button type="primary" @click="loginForm()">登录</el-button>
        </div>
      </el-col>
  </el-row>
  </div>

</template>

<script>
export default {
  name:'NavMenu',
  data() {
    return {

    }
  },
  methods: {
        loginForm() {
            this.$router.push("/Login");
        },
        loginout() {
            this.$router.push("/").catch(err=>err);
            this.$store.state.isLogin=false;
        }
    },

}
</script>
<style scoped>
*{
  list-style: none;
  text-decoration: none;
}


</style>